<!DOCTYPE html>
<html lang="en">

<head>
    <title>Article Detail</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="button.css">
    <link rel="stylesheet" type="text/css" href="footer.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="button.js"></script>

</head>

<!-- 导航栏 -->
<div class="container" style="margin-top:15px">

    <nav class="navbar navbar-expand-sm bg-secondary navbar-light">

        <a class="navbar-brand" href="#">IBLOG</a>

        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">滕王阁序-详情</a>
            </li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


        <!-- 这个 div 加上 justify-content-end 样式即可 -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <ul class="navbar-nav" id="headerNav">
                <a href="add_article.html" class="btn btn-info" role="button">编辑</a>
                &emsp;
                <a href="#" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" role=" button">删除</a>
                &emsp;
                <a href="#" class="btn btn-light" role="button">私密</a>
                &emsp;
            </ul>
        </div>
    </nav>
</div>

<div class="container">
    <div class="row">

        <!-- 标题及作者 -->
        <h2 class="col-12 mt-4 mb-4">滕王阁序</h2>
        <div class="col-12 alert alert-success">
            Author：王勃 &emsp;&emsp; Datetime：唐
        </div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p> &emsp;&emsp;豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
            <p></p>
            雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；<p></p>
            千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。<p></p>
            家君作宰，路出名区；童子何知，躬逢胜饯。<p></p>

            &emsp;&emsp;时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。<p></p>
            俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。<p></p>
            层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；<p></p>
            桂殿兰宫，即冈峦之体势。<p></p>

            &emsp;&emsp;披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；<p></p>
            舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<p></p>
            落霞与孤鹜齐飞，秋水共长天一色。<p></p>
            渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。<p></p>

            &emsp;&emsp;遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。<p></p>
            四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。<p></p>
            望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<p></p>
            关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？<p></p>

            &emsp;&emsp;嗟乎！时运不齐，命途多舛。<p></p>
            冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？<p></p>
            所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。<p></p>
            酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。<p></p>
            孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！<p></p>

            &emsp;&emsp;勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。<p></p>
            舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；<p></p>
            今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？<p></p>

            &emsp;&emsp;呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；<p></p>
            登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；<p></p>
            一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：<p></p>

            滕王高阁临江渚，佩玉鸣鸾罢歌舞。<p></p>

            画栋朝飞南浦云，珠帘暮卷西山雨。<p></p>

            闲云潭影日悠悠，物换星移几度秋。<p></p>

            阁中帝子今何在？槛外长江空自流。</p>
            <p></p>
        </div>
    </div>
</div>


<!-- 发表评论 -->
<hr>
<div class="container">
    <div>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="body">
                    <strong>
                        我也要发言：
                    </strong>
                </label>
                <textarea type="text" class="form-control" id="body" name="body" rows="2"></textarea>
            </div>
            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-primary ">发送</button>
        </form>
    </div>
    <br>
    <br>
    <h5 class="row justify-content-center">
        请<a href="login.html">登录</a>后回复
    </h5>

    <!-- 显示评论 -->
    <h4>共有2条评论</h4>
    <div>
        <hr>
        <p>
            <span style="color: green">
                杜甫
            </span> 760年中秋节 时说：
        </p>
        <pre style="font-family: inherit; font-size: 1em;">
            卧槽，写的真卧槽。</pre>
        <p>
            <strong style="color: pink">
                李白
            </strong> 于
            <span style="color: green">
                杜甫
            </span> 760年重阳节 时说：
        </p>
        <pre style="font-family: inherit; font-size: 1em;">
            还要我没有和他在同一时期。</pre>
    </div>
</div>
<br>


<!-- 删除弹窗Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">您在执行删除操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你确定要删除这篇文章吗？此操作不可恢复
            </div>
            <div class="modal-footer">
                <a href="article_datail copy.html" onclick="javascript:return del_success()" class="btn btn-danger"
                    role="button">确定</a>
                <a href="#" class="btn btn-info" role="button" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>





<!-- 向上按钮 -->
<button type="button" id="BackTop" class="toTop-arrow" style="z-index: 100;"></button>



<footer id="footer">
    <div class="container">
        <hr style="margin: 0;">
    </div>
    <nav class="navbar navbar-light mb-0" id="nav-footer" style="background-color: white">

        <div class="row col-12 justify-content-center font-size-xs">
            <div style="text-align: center; color: black;">
                <div class="mb-0">
                    <div id="show_time0">
                        <script>
                            setInterval("show_time0.innerHTML='CopyRight © 2019 ~'+new Date().getFullYear();", 1000);
                        </script>
                    </div>
                    ZXY iblog
                </div>
                <p class="mb-0">Powered by
                    <span class="mb-0">&nbsp;豫1008611</span>
                </p>
            </div>
        </div>
        </div>
    </nav>
</footer>

<script>
    function del_success() {
        alert('删除成功!!!')
    }
</script>

</body>

</html>